<!-- //select的change事件，接的值是目前的选中值，就是当前的id；v-model绑定的值是默认显示第几条，比如data定义的是1，对应的就是设备一。el-option循环的数组就是下拉框所有的选项 -->
<!-- <template>
  <div class="rTop">
    <div style="width: 100%">
      <h3 class="eqName" style="float: left">设备名称</h3>
      <div class="deviceSelect">
        
        <el-select v-model="value" @change="change(value)" id="envirDevice">
          <el-option
            v-for="item in deviceOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div style="clear: both"></div>
    </div>
    <div>
      <div class="currentData">
        <div class="dataItem">
          <div><img src="" alt="" />温度</div>
          <div class="itemVal wendu">{{ newvalue.temperature }}℃</div>
        </div>
        <div class="dataItem">
          <div><img src="" alt="" />湿度</div>
          <div class="itemVal shidu">{{ newvalue.humidity }}</div>
        </div>
        <div class="dataItem">
          <div><img src="" alt="" />风速</div>
          <div class="itemVal fengsu">{{ newvalue.wind_speed }}</div>
        </div>
        <div class="dataItem">
          <div><img src="" alt="" />风向</div>
          <div class="itemVal fengxiang">{{ newvalue.wind_direction }}</div>
        </div>
        <div class="dataItem">
          <div><img src="" alt="" />PM2.5</div>
          <div class="itemVal pm25">{{ newvalue.PM2_5 }}</div>
        </div>
        <div class="dataItem">
          <div><img src="" alt="" />PM10</div>
          <div class="itemVal pm10">{{ newvalue.PM10 }}</div>
        </div>
        <div class="dataItem">
          <div><img src="" alt="" />噪声</div>
          <div class="itemVal zaosheng">{{ newvalue.noise }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

export default ({
  data () {
    return {
      value: '1',//对应的是v-model，默认显示1对应的label

      newvalue: {},//准备空对象用来接change事件里发生改变时新的对象
      deviceOptions: [//option的数组
        { label: "设备一", value: "1" },
        { label: "设备二", value: "2" },
        { label: "设备三", value: "3" },
      ],

      currentData: [//假数据，三个对象分别对应三个选项
        {
          temperature: '32.2',
          humidity: '70.2',
          wind_speed: '0.5',
          wind_direction: '127',
          PM2_5: '41',
          PM10: '14',
          noise: '98.6',
        },
        {
          temperature: '3.2',
          humidity: '7.2',
          wind_speed: '0.5',
          wind_direction: '127',
          PM2_5: '41',
          PM10: '14',
          noise: '98.6',
        },
        {
          temperature: '4.2',
          humidity: '70.2',
          wind_speed: '0.5',
          wind_direction: '127',
          PM2_5: '41',
          PM10: '14',
          noise: '98.6',
        },
      ],

    };
  },
  mounted () {
    this.change(this.value)
  },

  methods: {
    change (item) {//change事件，空对象用来接对应的选项的数据，this.currentData[item]代表数组里的每一项，[item-1]是因为item是1、2、3，而数组的下标是0、1、2。
      // console.log(item, '111',);
      this.newvalue = this.currentData[item - 1];

    },
  }

})
</script> -->













<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="活动名称">
      <el-input v-model="form.name" @input="resetRegionOptions"></el-input>
    </el-form-item>

    <el-form-item label="活动区域">
      <el-select
        v-model="form.region"
        placeholder="请选择活动区域"
        @change="resetOptions"
      >
        <el-option
          v-for="(region, index) in regions"
          :key="index"
          :label="region.label"
          :value="region.value"
        ></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="活动时间">
      <el-col :span="11">
        <el-date-picker
          type="date"
          placeholder="选择日期"
          v-model="form.date1"
          style="width: 100%"
        ></el-date-picker>
      </el-col>
      <el-col class="line" :span="2">-</el-col>
      <el-col :span="11">
        <el-time-picker
          placeholder="选择时间"
          v-model="form.date2"
          style="width: 100%"
        ></el-time-picker>
      </el-col>
    </el-form-item>

    <el-form-item label="即时配送">
      <el-switch v-model="form.delivery"></el-switch>
    </el-form-item>

    <el-form-item label="活动性质" v-if="currentTypes.length > 0">
      <el-checkbox-group v-model="form.type">
        <el-checkbox
          v-for="(type, index) in currentTypes"
          :key="index"
          :label="type"
          >{{ type }}</el-checkbox
        >
      </el-checkbox-group>
    </el-form-item>

    <el-form-item label="特殊资源" v-if="currentResources.length > 0">
      <el-radio-group v-model="form.resource">
        <el-radio
          v-for="(resource, index) in currentResources"
          :key="index"
          :label="resource"
          >{{ resource }}</el-radio
        >
      </el-radio-group>
    </el-form-item>

    <el-form-item label="活动形式">
      <el-input type="textarea" v-model="form.desc"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data () {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      // 定义不同区域的配置//下拉框显示对象需要使用数组，在判断对应下拉选项需要显示的内容时，在从该对象数组中找如果要使用对象，需要使用v-for
      regions: [
        { value: 'shanghai', label: '区域一', types: ['美食/餐厅线上活动', '地推活动'], resources: ['线上品牌商赞助'] },
        { value: 'beijing', label: '区域二', types: ['线下主题活动', '单纯品牌曝光'], resources: ['线下场地免费'] },
        { value: 'zhengzhou', label: '区域三', types: ['美食/餐厅线上活动', '线下主题活动', '单纯品牌曝光'], resources: ['线下场地免费', '线上品牌商赞助'] }
      ]
    };
  },
  computed: {
    // 根据当前选择的区域，动态计算可用的活动性质
    currentTypes () {
      const selectedRegion = this.regions.find(region => region.value === this.form.region);
      return selectedRegion ? selectedRegion.types : [];
    },
    // 根据当前选择的区域，动态计算可用的活动资源
    currentResources () {
      const selectedRegion = this.regions.find(region => region.value === this.form.region);
      return selectedRegion ? selectedRegion.resources : [];
    },
    resetRegionOptions () {

    }
  },
  methods: {
    // 提交表单
    onSubmit () {
      console.log('submit!', this.form);
    },
    // 重置活动性质和活动资源的选择
    resetOptions () {
      this.form.type = [];
      this.form.resource = '';
    }
  }
};
</script>

<style scoped>
.line {
  text-align: center;
}
</style> 
